<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>
			轨迹回放
		</title>
		<script type="text/javascript" src="js/lib/jquery.min.js?version=1.0.0"></script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#myshape{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}

			#replay{
				width: 100%;
			    height: 100px;
			    background-color: #d4d4fd;
			    position: absolute;
			    bottom: 0px;
			    text-align: center;
			    line-height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="myshape"></div>
		<div id="replay">轨迹播放</div>
		<script type="text/javascript">
			// -----------拖拽-----------
			var drag_h = 0;
			var drag_w = 0;
			var dragX = 0;
			var dragY = 0;
			var l = 0;
			var t = 0;
			var isDrag = false;
			var records = [];
			// div 
			$('body').on('mousedown','#myshape',function (e) {
			    drag_h = $(this)[0].offsetHeight
			    drag_w = $(this)[0].offsetWidth
			    dragX = e.clientX - $(this)[0].offsetLeft
			    dragY = e.clientY - $(this)[0].offsetTop
			    isDrag=true;
			    startTime = Date.now();
			    records = [];
			});


			$(document).mousemove(function (e) {
			    if(isDrag==false){
			        return ;
			    }
			    l = e.clientX - dragX
			    t = e.clientY - dragY
			    $('#myshape').css({
			        left: l + 'px',
			        top: t + 'px',
			    });
			    records.push({
			        time:parseInt(Date.now()) - startTime,
			        left:l,
			        top:t
			    });
			})
			$(document).mouseup(function (e) {
			    isDrag = false;
			})

			$('#replay').on('click',function(e){
			    $(records).each(function(index,item){
			        setTimeout(function(){
			            $('#myshape').css({
			                left: item.left + 'px',
			                top: item.top + 'px',
			            });
			        },parseInt(item.time));
			    });
			});
		</script>
	</body>
</html>
